<template>
  <div>
    <dt-grid ref="gridRef" :onFetch="onFetch" page></dt-grid>
    <!--新增，编辑角色-->
    <edit-page ref="editRef" @search="onSearch"></edit-page>
    <check-modal ref="checkRef" />
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { columnOpt } from './biz/column'
  import roleMgr from './biz/index'
  import editPage from './component/editPage.vue'
  import checkModal from './component/checkModal.vue'

  const [gridRef, editRef, checkRef] = [ref(), ref(), ref()]

  onMounted(() => {
    gridRef.value.init(new columnOpt(fun))
    gridRef.value.fetch()
  })

  function onFetch(data) {
    return roleMgr.getRoleList(data)
  }

  function onSearch() {
    gridRef.value.fetch()
  }

  const fun = {
    editFun: (row) => {
      editRef.value.edit(row)
    },
    checkFun: (row) => {
      checkRef.value.show(row)
    }
  }
</script>

<style scoped></style>
